<!-- 首页内容 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">

    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./common.css">
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
   <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <style>

    </style>
 </head>
 <body>
   <!-- 快捷导航 -->
   <div class="shortcut">
      <div class="wrapper">
         <ul>
            <li><a href="#" class="login">请先登录</a></li>
            <li><a href="#">免费注册</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">会员中心</a></li>
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">在线客服</a></li>
            <li><a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li>
         </ul>
      </div>
   </div>
   <!-- 头部 -->
   <div class="header wrapper">
      <div class="logo">
         <a href="#"><img src="./images/logo.png" alt="小兔鲜儿"></a>
      </div>
      <div class="nav">
         <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#" class="shengxian">生鲜</a></li>
            <li><a href="#">美食</a></li>
            <li><a href="#">餐厨</a></li>
            <li><a href="#">电器</a></li>
            <li><a href="#">居家</a></li>
            <li><a href="#">洗护</a></li>
            <li><a href="#">孕婴</a></li>
            <li><a href="#">服装</a></li>
         </ul>
      </div>
      <div class="search">
         <span class="iconfont icon-search"></span>
         <input type="text" placeholder="搜一搜">

      </div>

      <!-- 购物车 -->
      <div class="cart">
         <span class="iconfont icon-cart-full"></span>
         <i>2</i>
      </div>


   </div>

   <!-- banner -->
   <div class="banner">
      <div class="wrapper">
         <!-- 图片 -->
         <ul class="pic">
            <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
            <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
            <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
         </ul>
         <!-- 侧导航 -->
         <div class="subnav">
            <ul>
               <li><div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                   <span class="iconfont icon-arrow-right-bold"></span>
               </li>
               <li><div><a href="#" class="classify">美食</a><a href="#">面包</a><a href="#">干果</a></div>
                   <span class="iconfont icon-arrow-right-bold"></span>
               </li>
               <li><div><a href="#" class="classify">餐厨</a><a href="#">数码产品</a></div>
                   <span class="iconfont icon-arrow-right-bold"></span>
               </li>
               <li><div><a href="#" class="classify">电器</a><a href="#">床品</a><a href="#">四件套</a></div>
                   <span class="iconfont icon-arrow-right-bold"></span>
               </li>
               <li><div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                   <span class="iconfont icon-arrow-right-bold"></span>
               </li>
               <li><div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                   <span class="iconfont icon-arrow-right-bold"></span>
               </li>
               <li><div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                   <span class="iconfont icon-arrow-right-bold"></span>
               </li>
               <li><div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                   <span class="iconfont icon-arrow-right-bold"></span>
               </li>
               <li><div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                   <span class="iconfont icon-arrow-right-bold"></span>
               </li>
               <li><div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                   <span class="iconfont icon-arrow-right-bold"></span>
               </li>
               
               
            </ul>
         </div>
         <!-- 圆点指示器 -->
         <ol>
            <li class="current"><i></i></li>
            <li><i></i></li>
            <li><i></i></li>
         </ol>
      </div>
   </div>

   <!-- 新鲜好物 -->
   <div class="goods wrapper">
      <!-- 标题 -->
      <div class="title">
         <div class="left">
            <h3>新鲜好物</h3>
            <p>新鲜出炉 品质靠谱</p>
         </div>
         <div class="right">
         <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
         </div>

      </div>
      <!-- 内容 -->
       <div class="bd">
         <ul>
            <li>
               <a href="#">
                  <div class="pic">
                     <img src="./uploads/goods1.png" alt="">
                  </div>
                  <div class="txt">
                     <h4>KN95级莫兰迪色防护口罩</h4>
                     <p>￥ <span>79</span></p>
                  </div>
               </a>
                     
            </li>
            <li>
               <a href="#">
                  <div class="pic">
                     <img src="./uploads/goods2.png" alt="">
                  </div>
                  <div class="txt">
                     <h4>KN95级莫兰迪色防护口罩</h4>
                     <p>￥ <span>79</span></p>
                  </div>
               </a>
                     
            </li>
            <li>
               <a href="#">
                  <div class="pic">
                     <img src="./uploads/goods3.png" alt="">
                  </div>
                  <div class="txt">
                     <h4>KN95级莫兰迪色防护口罩</h4>
                     <p>￥ <span>79</span></p>
                  </div>
               </a>
                     
            </li>
            <li>
               <a href="#">
                  <div class="pic">
                     <img src="./uploads/goods4.png" alt="">
                  </div>
                  <div class="txt">
                     <h4>KN95级莫兰迪色防护口罩</h4>
                     <p>￥ <span>79</span></p>
                  </div>
               </a>
                     
            </li>

         </ul>
       </div>
   </div>

   <!-- 人气推荐 -->
   <div class="recommend wrapper">
      <!-- 标题 -->
      <div class="title">
         <div class="left">
            <h3>人气推荐</h3>
            <p>人气爆款 不容错过</p>
         </div>
      </div>
      <div class="bd">
         <ul>
            <li>
               <a href="#">
                  <div class="pic">
                     <img src="./uploads/goods1.png" alt="">
                  </div>
                  <div class="txt">
                     <h4>KN95级莫兰迪色防护口罩</h4>
                     <p>我猜得到 你的需要</p>
                  </div>
               </a>
            </li>
            <li>
               <a href="#">
                  <div class="pic">
                     <img src="./uploads/goods2.png" alt="">
                  </div>
                  <div class="txt">
                     <h4>KN95级莫兰迪色防护口罩</h4>
                     <p>￥ <span>79</span></p>
                  </div>
               </a>
            </li>
            <li>
               <a href="#">
                  <div class="pic">
                     <img src="./uploads/goods3.png" alt="">
                  </div>
                  <div class="txt">
                     <h4>KN95级莫兰迪色防护口罩</h4>
                     <p>￥ <span>79</span></p>
                  </div>
               </a>
            </li>
            <li>
               <a href="#">
                  <div class="pic">
                     <img src="./uploads/goods4.png" alt="">
                  </div>
                  <div class="txt">
                     <h4>KN95级莫兰迪色防护口罩</h4>
                     <p>￥ <span>79</span></p>
                  </div>
               </a>
            </li>
            
         </ul>

      </div>
   </div>

   <!-- 热门品牌 -->
   <div class="brand">
      <div class="wrapper">
         <!-- 标题 -->
            <div class="title">
               <div class="left">
                  <h3>热门品牌</h3>
                  <p>品牌选择 品质保障</p>
               </div>
               <div class="button">
                  <a href="#" class="prev">
                     <i class="iconfont icon-arrow-left-bold"></i>
                  </a>
                  <a href="#" class="next">
                     <i class="iconfont icon-arrow-right-bold"></i>

                  </a>
               </div>
            </div>
            <div class="bd">
               <ul>
                  <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>

                  <li><a href="#"><img src="./uploads/hot2.png" alt=""></a></li>
                  <li><a href="#"><img src="./uploads/hot3.png" alt=""></a></li>
                  <li><a href="#"><img src="./uploads/hot4.png" alt=""></a></li>
                  <li><a href="#"><img src="./uploads/hot5.png" alt=""></a></li>
               </ul>
            </div>
      </div>
   </div>

   <!-- 生鲜 -->
   <div class="fresh wrapper">
      <!-- 标题 -->
      <div class="title">
         <div class="left">
            <h3>生鲜</h3>

         </div>
         <div class="right">
            <ul>
               <li><a href="#" class="active">热门</a></li>
               <li><a href="#">女装</a></li>
               <li><a href="#">奢侈品</a></li>
               <li><a href="#">裤装</a></li>
               <li><a href="#">衬衫</a></li>
               <li><a href="#">T恤</a></li>
               <li><a href="#">内衣</a></li>
            </ul>
         <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
         </div>

      </div>
      <!-- 内容 -->
      <div class="content">
         <div class="left">
            <a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
         </div>
         <div class="right">
            <ul>
               <li>
                  <a href="#"><div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
                     <div class="txt">
                        <div class="info">
                           <h4>双味千层，手抓饼烤肉组合</h4>
                           <p>240g/袋 4片装</p>
                           <p>加热即食</p>
                        </div>
                        <p class="price">￥<span>89.99s</span></p>

                     </div>
                  </a>
                  <div class="cover">
                     <p>找相似</p>
                     <p></p>
                     <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                  </div>
               </li>
               <li>
                  <a href="#"><div class="pic"><img src="./uploads/fresh2.png" alt=""></div>
                     <div class="txt">
                        <div class="info">
                           <h4>双味千层，手抓饼烤肉组合</h4>
                           <p>240g/袋 4片装</p>
                           <p>加热即食</p>
                        </div>
                        <p class="price">￥<span>89.99s</span></p>

                     </div>
                  </a>
                  <div class="cover">
                     <p>找相似</p>
                     <p></p>
                     <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                  </div>
               </li>
               <li>
                  <a href="#"><div class="pic"><img src="./uploads/fresh3.png" alt=""></div>
                     <div class="txt">
                        <div class="info">
                           <h4>双味千层，手抓饼烤肉组合</h4>
                           <p>240g/袋 4片装</p>
                           <p>加热即食</p>
                        </div>
                        <p class="price">￥<span>89.99s</span></p>

                     </div>
                  </a>
                  <div class="cover">
                     <p>找相似</p>
                     <p></p>
                     <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                  </div>
               </li>
               <li>
                  <a href="#"><div class="pic"><img src="./uploads/fresh4.png" alt=""></div>
                     <div class="txt">
                        <div class="info">
                           <h4>双味千层，手抓饼烤肉组合</h4>
                           <p>240g/袋 4片装</p>
                           <p>加热即食</p>
                        </div>
                        <p class="price">￥<span>89.99s</span></p>

                     </div>
                  </a>
                  <div class="cover">
                     <p>找相似</p>
                     <p></p>
                     <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                  </div>

               </li>
               <li>
                  <a href="#"><div class="pic"><img src="./uploads/fresh5.png" alt=""></div>
                     <div class="txt">
                        <div class="info">
                           <h4>双味千层，手抓饼烤肉组合</h4>
                           <p>240g/袋 4片装</p>
                           <p>加热即食</p>
                        </div>
                        <p class="price">￥<span>89.99s</span></p>

                     </div>
                  </a>
                  <div class="cover">
                     <p>找相似</p>
                     <p></p>
                     <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                  </div>
               </li>
               <li>
                  <a href="#"><div class="pic"><img src="./uploads/fresh6.png" alt=""></div>
                     <div class="txt">
                        <div class="info">
                           <h4>双味千层，手抓饼烤肉组合</h4>
                           <p>240g/袋 4片装</p>
                           <p>加热即食</p>
                        </div>
                        <p class="price">￥<span>89.99s</span></p>

                     </div>
                  </a>
                  <div class="cover">
                     <p>找相似</p>
                     <p></p>
                     <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                  </div>
               </li>
               <li>
                  <a href="#"><div class="pic"><img src="./uploads/fresh7.png" alt=""></div>
                     <div class="txt">
                        <div class="info">
                           <h4>双味千层，手抓饼烤肉组合</h4>
                           <p>240g/袋 4片装</p>
                           <p>加热即食</p>
                        </div>
                        <p class="price">￥<span>89.99s</span></p>

                     </div>
                  </a>
                  <div class="cover">
                     <p>找相似</p>
                     <p></p>
                     <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                  </div>
               </li>
               <li>
                  <a href="#"><div class="pic"><img src="./uploads/fresh8.png" alt=""></div>
                     <div class="txt">
                        <div class="info">
                           <h4>双味千层，手抓饼烤肉组合</h4>
                           <p>240g/袋 4片装</p>
                           <p>加热即食</p>
                        </div>
                        <p class="price">￥<span>89.99s</span></p>

                     </div>
                  </a>
                  <div class="cover">
                     <p>找相似</p>
                     <p></p>
                     <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                  </div>
               </li>
            </ul>
         </div>
      </div>
   </div>

   <!-- 最新专题 -->
   <div class="topic wrapper">
      <!-- 标题 -->
      <div class="title">
         <div class="left">
            <h3>最新专题</h3>
         </div>
         <div class="right">
         <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
         </div>

      </div>
      <div class="topic-bd">
         <ul>
            <li>
               <a href="#">
                  <div class="pic">
                     <img src="./uploads/topic1.png" alt="">
                     <!-- 定位区域 -->
                      <div class="cover">
                        <div class="left">
                           <h4>吃这些美食才不算辜负自己</h4>
                           <p>餐厨起居洗护好物</p>
                        </div>
                        <div class="right">
                           ￥<span>29.9</span><span>起</span>
                        </div>
                      </div>
                  </div>
                  <div class="txt">
                     <div class="left">
                        <p>
                           <i class="iconfont iconfont icon-favorites-fill"></i>
                           <span>1220</span>
                        </p>
                        <p>
                           <i class="iconfont iconfont icon-browse"></i>
                           <span>1800</span>
                        </p>

                     </div>
                     <div class="right">
                        <p>
                           <i class="iconfont iconfont icon-comment"></i>
                           <span>246</span>
                        </p>
                     </div>
                  </div>
               </a>
            </li>
            <li>
               <a href="#">
                  <div class="pic">
                     <img src="./uploads/topic2.png" alt="">
                     <!-- 定位区域 -->
                      <div class="cover">
                        <div class="left">
                           <h4>吃这些美食才不算辜负自己</h4>
                           <p>餐厨起居洗护好物</p>
                        </div>
                        <div class="right">
                           ￥<span>29.9</span><span>起</span>
                        </div>
                      </div>
                  </div>
                  <div class="txt">
                     <div class="left">
                        <p>
                           <i class="iconfont iconfont icon-favorites-fill"></i>
                           <span>1220</span>
                        </p>
                        <p>
                           <i class="iconfont iconfont icon-browse"></i>
                           <span>1800</span>
                        </p>

                     </div>
                     <div class="right">
                        <p>
                           <i class="iconfont iconfont icon-comment"></i>
                           <span>246</span>
                        </p>
                     </div>
                  </div>
               </a>
            </li>
            <li>
               <a href="#">
                  <div class="pic">
                     <img src="./uploads/topic3.png" alt="">
                     <!-- 定位区域 -->
                      <div class="cover">
                        <div class="left">
                           <h4>吃这些美食才不算辜负自己</h4>
                           <p>餐厨起居洗护好物</p>
                        </div>
                        <div class="right">
                           ￥<span>29.9</span><span>起</span>
                        </div>
                      </div>
                  </div>
                  <div class="txt">
                     <div class="left">
                        <p>
                           <i class="iconfont iconfont icon-favorites-fill"></i>
                           <span>1220</span>
                        </p>
                        <p>
                           <i class="iconfont iconfont icon-browse"></i>
                           <span>1800</span>
                        </p>

                     </div>
                     <div class="right">
                        <p>
                           <i class="iconfont iconfont icon-comment"></i>
                           <span>246</span>
                        </p>
                     </div>
                  </div>
               </a>
            </li>
         </ul>
      </div>
   </div>

   <!-- 底部 -->
   <div class="footer">
      <div class="wrapper">
         <!-- 服务 -->
         <div class="service">
            <ul>
               <li><h5></h5><p>价格亲民</p></li>
               <li><h5></h5><p>物流快捷</p></li>
               <li><h5></h5><p>品质新鲜</p></li>
               <li><h5></h5><p>售后无忧</p></li>
            </ul>
         </div>
         <!-- 帮助中心 -->
         <div class="help">
            <div class="left">
               <dl>
                  <dt>帮助中心</dt>
                  <dd><a href="#">购物流程</a></dd>
                  <dd><a href="#">支付方式</a></dd>
                  <dd><a href="#">售后规则</a></dd>
               </dl>
               <dl>
                  <dt>配送方式</dt>
                  <dd><a href="#">配送运费</a></dd>
                  <dd><a href="#">配送范围</a></dd>
                  <dd><a href="#">配送时间</a></dd>
               </dl>

               <dl>
                  <dt>关于我们</dt>
                  <dd><a href="#">平台规则</a></dd>
                  <dd><a href="#">联系我们</a></dd>
                  <dd><a href="#">问题反馈</a></dd>
               </dl>
               <dl>
                  <dt>售后服务</dt>
                  <dd><a href="#">售后政策</a></dd>
                  <dd><a href="#">推看说明</a></dd>
                  <dd><a href="#">取消订单</a></dd>
               </dl>
               <dl>
                  <dt>服务热线</dt>
                  <dd><a href="#">在线服务<span class="iconfont icon-customer-service"></span></a></dd>
                  <dd><a href="#">客服电话400-0000-000</a></dd>
                  <dd><a href="#">工作时间 周一至周日 8：00-18:00</a></dd>


               </dl>

            </div>
            <div class="right">
               <ul>
                  <li>
                     <div class="pic"><img src="./images/wechat.png" alt=""></div>
                     <p>微信公众号</p>
                  </li>
                  <li>
                     <div class="pic"><img src="./images/app.png" alt=""></div>
                     <p>应用下载</p>

                  </li>
               </ul>
            </div>
         </div>
         <!-- 版权信息 -->
         <div class="copyright">
            <p>
               <a href="#">关于我们</a>
               <a href="#">帮助中心</a>
               <a href="#">售后服务</a>
               <a href="#">配送与验收</a>
               <a href="#">商务合作</a>
               <a href="#">搜索推荐</a>
               <a href="#">友情链接</a>
            </p>
            <p>CopyRight @ 小兔鲜</p>

         </div>

      </div>
   </div>
</body>
 </html>